<template>
  <div>
    <!-- 顶部导航 -->
    <van-nav-bar :title="pageData.community" left-arrow>
      <template #left>
        <div>
          <van-icon
            name="arrow-left"
            size="20"
            color="#fff"
            @click="$router.go(-1)"
          />
        </div>
      </template>
    </van-nav-bar>
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, i) in pageData.houseImg" :key="i">
        <img :src="'http://liufusong.top:8080' + item" />
      </van-swipe-item>
    </van-swipe>
    <div class="box">
      <!-- 标题 -->
      <h3>{{ pageData.title }}</h3>
      <!-- tag标签 -->
      <van-tag type="success" v-for="(item, i) in pageData.tags" :key="i">{{
        item
      }}</van-tag>
    </div>
  </div>
</template>

<script>
import { getHouse } from '@/utils/storage'
import { information } from '@/api/house'
export default {
  name: 'house-page',
  components: {},
  props: {},
  data() {
    return {
      pageData: ''
    }
  },
  computed: {},
  watch: {},
  async created() {
    // const res = getHouse()
    // console.log(res) // 房屋id
    const res = await information(getHouse())
    // console.log(res)
    this.pageData = res.body
    console.log(this.pageData)
  },
  methods: {}
}
</script>

<style scoped lang="less">
.van-nav-bar {
  position: sticky;
  top: 0;
  background-color: #21b97a;
  ::v-deep .van-nav-bar__title {
    color: #fff;
  }
}
.van-swipe {
  width: 100%;
  height: 212px;
  img {
    width: 100%;
    height: 100%;
  }
}
// title tag 盒子样式
.box {
  padding: 15px;
  border-bottom: 1px solid #ccc;
  h3 {
    margin: 16px 0;
  }
}
</style>
